const token = location.search.slice(7);
console.log(token)
// 障碍物数量
const blockNum = 2;
const dino = document.querySelector("#dino");
const block = document.querySelector("#block");

const spiner = document.querySelector(".spiner");
const masker = document.querySelector(".masker");
const filler = document.querySelector(".filler");

// var jumpS = 0.5;
// var blockS = 1;

var grade = document.querySelector("#grade span");
// 分数
var grades = 0;
var choice = true;
// 判断技能期间
var skilling = false;
// 判断技能是否可用
var skillstate = false;
// 技能时间
var CD = 10;
// 技能显示
var cdTime = document.querySelector("#cdTime span");

// 请求地址
const link = 'http://localhost:8384/dinosaur/'

// 技能条
// skillStyle();



// vue排名绑定
window.onload = function(){
	console.log("开始运行")
    var vm = new Vue({
        el:'#ranking',
        data:{
            msg:null,
            me:null
        },
        methods:{
        },
        mounted(){
            setInterval(()=>{
                // 渲染数据
                axios
                    .get(link + 'score/get',{
                        params:{
                            "token":token
                        }
                    })
                    .then(({data}) => {
                        this.msg = data.data;
                        console.log(this.msg);
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },1000);

            setInterval(()=>{
                axios
                    .get(link + 'score/getMe',{
                        params:{
                            "token":token
                        }
                    })
                    .then(({data}) => {
                        const me = data.data.me;
                        if(grades > me){
                            axios
                                .post(link + 'score/update?token='+token,{
                                    score:grades
                                })
                                .then(({data}) => {
                                    console.log(data);
                                })
                                .catch(function (error) { // 请求失败处理
                                    console.log(error);
                                });
                        }
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },100)
            
        }
        
    });
}


// 数据刷新





window.addEventListener("keydown", event => {
    // 按下键盘开始游戏
    block.classList.add('block1Class');
    if(!dino.classList.contains("ImagesClass") && !dino.classList.contains("jumpAndImagesClass")){
        dino.classList.add('ImagesClass');
    }

    // 如果分数为0，那么重新加载技能
    if(grades == 0){
        CD = 10;
        skillStyle();
    }
    // 分数显示
    grade.innerHTML = grades;

    // 键盘按下空格事件
    keyEvents(event);

    // 键盘按下J事件
    keyJEvents(event);

});


backgroundLayer();
// 背景动画
function backgroundLayer(){
    // 一秒后播放动画
    setTimeout(()=>{
        const backgroundLayer2 = document.querySelector("#backgroundLayer2");
        backgroundLayer2.style.animationName = "backgroundImages2,backgroundMove2";
        backgroundLayer2.style.animationDuration = "0.4s,10s";
        backgroundLayer2.style.animationIterationCount = "infinite";
        backgroundLayer2.style.animationTimingFunction = "linear";
        setTimeout(()=>{
            const backgroundLayer = document.querySelector("#backgroundLayer");
            backgroundLayer.style.animationName = "backgroundImages2,backgroundMove2";
            backgroundLayer.style.animationDuration = "0.4s,10s";
            backgroundLayer.style.animationIterationCount = "infinite";
            backgroundLayer.style.animationTimingFunction = "linear";
        },5050)
    },1850);
}

// 每1毫秒执行一次判断
setInterval(() => {
    const dinoBottom = parseFloat(
        getComputedStyle(dino).getPropertyValue('bottom')
    );
    const dinoWidth = dino.offsetWidth-10;
    const blockLeft = parseFloat(
        getComputedStyle(block).getPropertyValue('left')
    );
    const blockHeight = block.offsetHeight-10;

    // 判断游戏是否结束
    gameOver(dinoBottom,blockHeight,blockLeft,dinoWidth);
    
    // 增加分数
    addGrades(blockLeft);

    // 判断技能触碰障碍物
    skillBlock(dinoBottom,blockHeight,blockLeft,dinoWidth);

},10);

// 技能条制作
function skillStyle(){
    CD = 10;
    if(window.time2){
        clearInterval(time2);
    }
    if(window.timeflaot){
        clearInterval(timeflaot);
    }
    // 技能为不可用状态
    skillstate =false;
    // 挂载技能动画
    installAnimation();
    cdTime.innerHTML = CD--;
    window.time2 = setInterval(()=>{
        if(1 == CD){
            cdTime.innerHTML = CD;
            let floatCd = CD-0.1;
            window.timeflaot = setInterval(()=>{
                cdTime.innerHTML = floatCd.toFixed(1);
                floatCd-=0.1;
                if(floatCd <= 0){

                    clearInterval(timeflaot);
                    clearInterval(time2);
                    cdTime.innerHTML = '';
                    // 卸载动画
                    uninstallAnimation();
                    CD = 10;
                    // 允许使用技能
                    skillstate = true;
                }
            },90)
        }else{
            cdTime.innerHTML = CD--;
        }
    },1000)
}

// 挂载技能动画
function installAnimation(){
    if(!spiner.classList.contains("spiner")){
        spiner.classList.add("spiner");
    }
    if(!masker.classList.contains("masker")){
        masker.classList.add("masker");
    }
    if(!filler.classList.contains("filler")){
        filler.classList.add("filler");
    }
}

// 卸载全部技能动画
function uninstallAnimation(){
    if(spiner.classList.contains("spiner")){
        spiner.classList.remove("spiner");
    }
    if(masker.classList.contains("masker")){
        masker.classList.remove("masker");
    }
    if(filler.classList.contains("filler")){
        filler.classList.remove("filler");
    }
    // 卸载计数
    if(window.time2){
        clearInterval(time2);
    }
    if(window.timeflaot){
        clearInterval(timeflaot);
    }
    cdTime.innerHTML = '';
}

// 键盘按下J事件
function keyJEvents(event){
    if(event.code === "KeyJ" && skillstate){
        removeDino();
        dino.classList.add('skillClass');
        skilling = true;
        // 设置3毫秒后移出此类
        setTimeout(() => {
            dino.classList.replace('skillClass','ImagesClass');
            skilling = false;
            // 随机生成障碍物
            randomBlock();
            // 重新生成技能条
            skillStyle();

        },1700);
    }
}

// 键盘按下空格事件
function keyEvents(event){
    if(event.code === "Space"){
        console.log("键盘空格按下");
        // 在节点增加一个类
        dino.classList.replace("ImagesClass","jumpAndImagesClass");
        // 设置3毫秒后移出此类
        setTimeout(() => {
            dino.classList.replace('jumpAndImagesClass','ImagesClass');
        },500);
    }
}

// 判断技能期间碰到障碍物
function skillBlock(dinoBottom,blockHeight,blockLeft,dinoWidth){
    if(skilling && dinoBottom+25 <= blockHeight && blockLeft < dinoWidth && blockLeft >= 0){
        removeBlock();
        grades+=3;
        grade.innerText = grades;   
    }
}

// 判断游戏是否结束
function gameOver(dinoBottom,blockHeight,blockLeft,dinoWidth){
    if(dinoBottom+10 <= blockHeight && blockLeft < dinoWidth-10 && blockLeft >= 0 && !skilling){
        removeBlock();
        if(dino.classList.contains('jumpClass')){
            dino.classList.remove('jumpClass');
        }
        alert("游戏结束");
        // 分数归零
        grades = 0;
        // 卸载动画
        uninstallAnimation();

        console.log(dinoBottom);
        // 刷新浏览器
        // location.reload();
    }
}

// 增加分数
function addGrades(blockLeft){
    if(blockLeft < 0 && choice){
        grades++;
        grade.innerText = grades;
        choice = false;
        randomBlock();
    }else if(blockLeft > 0){
        choice = true;
    }
}

// 去除所有障碍物
function removeBlock(){
    if(block.classList.contains('block1Class')){
        block.classList.remove('block1Class');
    }
    if(block.classList.contains('block2Class')){
        block.classList.remove('block2Class');
    }
}

// 去除人物事件
function removeDino(){
    if(dino.classList.contains('ImagesClass')){
        dino.classList.remove('ImagesClass');
    }
    
    if(dino.classList.contains('jumpAndImagesClass')){
        dino.classList.remove('jumpAndImagesClass');
    }
}

// 随机下一个障碍物哪个出场
function randomBlock(){
    removeBlock();

    // setTimeout(() => console.log(1), 5000);

    let num = Math.ceil(Math.random()*blockNum);
    block.classList.add('block'+num+'Class');
}


// 每5秒执行一次(暂时除了点问题，障碍物平移，卡帧。。。所以不调用)
function addSpeed(){
    setInterval(()=>{
        const jump = document.querySelector(".jumpAndImagesClass");
        const images = document.querySelector(".ImagesClass");
        const block1 = document.querySelector(".block1Class");
        const block2 = document.querySelector(".block2Class");
        // 判断分数进行增强
        if((grades+1) % 5 == 0 && jumpS > 0.1){
            console.log("开始增速");
            jumpS-=0.025;
            blockS-=0.05;
            console.log(jump);
            if(jump != null){
                jump.style.animationDuration = jumpS+'s,'+blockS+'s';
            }else{
                var detection1 = setInterval(()=>{
                    if(jump != null){
                        jump.style.animationDuration = jumpS+'s,'+blockS+'s';
                        clearInterval(detection1);
                    }
                },1)
            }
            if(images != null){
                images.style.animationDuration = blockS+'s';
            }else{
                var detection2 = setInterval(()=>{
                    if(images != null){
                        images.style.animationDuration = blockS+'s';
                        clearInterval(detection2);
                    }
                },1)
            }
            if(block1 != null){
                block1.style.animation = 'block '+blockS+'s linear infinite';
            }else{
                var detection3 = setInterval(()=>{
                    if(block1 != null){
                        block1.style.animation = 'block '+blockS+'s linear infinite';
                        clearInterval(detection3);
                    }
                },1)
            }
            if(block2 != null){
                block2.style.animation = 'block '+blockS+'s linear infinite';
            }else{
                var detection4 = setInterval(()=>{
                    if(block2 != null){
                        block2.style.animation = 'block '+blockS+'s linear infinite';
                        clearInterval(detection4);
                    }
                },1)
            }
            console.log(jumpS);
            console.log(blockS);
        }
    },1000);
}